import React, { Component } from 'react';
import EventBus from '../../util/eventbus';

interface Iprops{
    children:any,
    title:string,
    keyId:string
}

interface Istate{
    visible:boolean
}

class SubMenu extends Component <Iprops,Istate>{
    state = {
        visible:false
    }

    componentDidMount(){
        //订阅open的事件
        EventBus.$on('open',(value:string[]) => {
            let index = value.findIndex((item:string) => {
                console.log(item,"item==============");
                return item == this.props.keyId
            });
            this.setState({
                visible:index!=-1
            })
        })
    }

    render() {
        let {visible} = this.state;
        return (
            <div>
                <div onClick={this.changeOpen}>
                    {this.props.title}
                </div>
                <div style={{'display':visible ? 'block' : 'none'}}>
                    {this.props.children}
                </div>
            </div>
        );
    }

    //控制子菜单显示和隐藏
    changeOpen = () => {
        let {visible} = this.state;
        this.setState({
            visible:!visible
        })
    }
}

export default SubMenu;